<template>
  <div>
    <!--工具条-->
    <el-form ref="elForm" size="medium" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="流程编号" label-width="100px">
            <el-input placeholder="流程编号" size="small" v-model="queryparam.fprocinsno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视图类型" label-width="100px">
            <el-select size="small" v-model="queryparam.viewState" placeholder="请选择视图类型">
              <el-option v-for="item in ViewState" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程名称" label-width="100px">
            <el-input placeholder="流程名称" size="small" v-model="queryparam.procBID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程主题" label-width="100px">
            <el-input placeholder="流程主题" size="small" v-model="queryparam.fprocinsname"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="发起人" label-width="100px">
            <selector :typemode="1" :ismulti="true" :checklisted="queryparam.startUser" @confirm="startUserconfirm"></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人" label-width="100px">
            <selector :typemode="1" :ismulti="true" :checklisted="queryparam.fapplicantuser" @confirm="applicantuserconfirm"></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程状态" label-width="100px">
            <el-select size="small" v-model="queryparam.procInsState" placeholder="请选择流程状态">
              <el-option v-for="(item, index) in ProcInsState" :key="index" :label="item" :value="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前待办人" label-width="100px">
            <selector :typemode="1" :ismulti="true" :checklisted="queryparam.approvingUser" @confirm="approvingUserconfirm"></selector>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前节点" label-width="100px">
            <el-input placeholder="当前流程节点" size="small" v-model="queryparam.actName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发起时间" label-width="100px">
            <el-date-picker v-model="queryparam.fstarttime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" size="small" @click="$refs.gridlist.loadData(1)" style="margin-left: 10px;">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="24">
        <pagetable ref="gridlist" :queryparam="queryparam" :apiajaxfun="apiajaxfun" :tablecol="tablecol" :colSlots="scopedSlots">
          <template slot="fstatus" slot-scope="record">{{
            ProcInsState[record.row.fstatus]
          }}</template>
          <template slot="fprocinsname" slot-scope="record">
            <el-button type="text" @click="viewPorceeFrom(record.row)" size="small">{{ record.row.fprocinsname }}</el-button>
          </template>
        </pagetable>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { ApiQueryporcessinsList } from '@/api/tappPorcessins.js'
import pagetable from '@/components/pagetable/index.vue'
export default {
  props: ['fromtype'],
  components: { pagetable },
  data () {
    return {
      queryparam: {
        fprocinsno: '',
        ViewState: '',
        procBID: '',
        fprocinsname: '',
        fstarttime: [],
        startUser: {},
        fapplicantuser: {},
        procInsState: '',
        approvingUser: {},
        actName: ''
      },
      ProcInsState: [
        '全部',
        '草稿',
        '处理中',
        '',
        '已完成',
        '废弃',
        '撤销',
        '待系统处理',
        '审批失败',
        '审批异常',
        '流程异常'
      ],
      ViewState: [
        { name: '所有视图', value: '1' },
        { name: '我的草稿', value: '2' },
        { name: '我的发起', value: '3' },
        { name: '待办待阅', value: '4' },
        { name: '已办已阅', value: '5' }
      ],
      scopedSlots: ['fprocinsname', 'fstatus'],
      questionName: '',
      apiajaxfun: ApiQueryporcessinsList,
      tablecol: [
        {
          title: '流程主题',
          dataIndex: 'fprocinsname',
          width: 150,
          scopedSlots: { customRender: 'fprocinsname' },
          align: 'center'
        },
        {
          title: '流程编码',
          dataIndex: 'fprocinsno',
          width: 150,
          scopedSlots: { customRender: 'fprocinsno' },
          align: 'center'
        },
        {
          title: '申请人',
          dataIndex: 'fapplicantusername',
          width: 150,
          scopedSlots: { customRender: 'fapplicantusername' },
          align: 'center'
        },
        {
          title: '发起人',
          dataIndex: 'fstartername',
          width: 150,
          scopedSlots: { customRender: 'fstartername' },
          align: 'center'
        },
        {
          title: '发起时间',
          dataIndex: 'fstarttime',
          width: 150,
          scopedSlots: { customRender: 'fstarttime' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'fcompletetime',
          width: 150,
          scopedSlots: { customRender: 'fcompletetime' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'fstatus',
          width: 150,
          scopedSlots: { customRender: 'fstatus' },
          align: 'center'
        },
        {
          title: '当前节点',
          dataIndex: 'fcurrentactname',
          width: 150,
          scopedSlots: { customRender: 'fcurrentactname' },
          align: 'center'
        },
        {
          title: '当前处理人',
          dataIndex: 'fcurrentapproversuser',
          width: 150,
          scopedSlots: { customRender: 'fcurrentapproversuser' },
          align: 'center'
        }
      ]
    }
  },
  created () { },
  methods: {
    viewPorceeFrom (rows) {
      const urlobj = this.$router.resolve({
        path: '/ProcessFrom',
        query: {
          processid: rows.fprocessid,
          processinsid: rows.fid,
          actinsid: rows.vactinsid,
          viewmodel: rows.viewmodel
        }
      })
      window.open(urlobj.href)
    },
    startUserconfirm (userlist) {
      if (userlist.length > 0) {
        this.queryparam.startUser = userlist[0]
      } else {
        this.queryparam.startUser = {}
      }
    },
    approvingUserconfirm (userlist) {
      if (userlist.length > 0) {
        this.queryparam.approvingUser = userlist[0]
      } else {
        this.queryparam.approvingUser = {}
      }
    },
    applicantuserconfirm (userlist) {
      if (userlist.length > 0) {
        this.queryparam.fapplicantuser = userlist[0]
      } else {
        this.queryparam.fapplicantuser = {}
      }
    }
  }
}
</script>
